<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no" />
    <link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/rem.css">
    <script src="../../js/statistics.js"></script>
    <title>商品详情</title>
    <style>
        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color:rgba(0,0,0,0);
        }
        header.header{
            background: #2a2c33;
            color: #ffffff;
        }
        .header h1{
            color:#fff;
            font-size:18px;
        }
        .header a{
            color:#fff;
        }
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, p, table, th, td, select, option {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .clearfix:before{
            display:table;
            content:'';
        }
        .clearfix:after{
            display:table;
            content:'';
            clear:both;
        }
        body{
            padding-bottom: 10px;
        }
        .top{
            width:100%;
            display:block;
            height:50vw;
        }
        .top1{
            padding-left:12px;
        }
        .top1>p{
            font-size: 16px;
            color:#333;
            margin-top:10px;
            line-height: 22px;
        }
        .top1>span{
            font-size: 14px;
            color:#666;
            float:left;
            line-height: 34px;
        }
        .top1>a{
            padding-left: 20px;
            height:34px;
            background:url("../../images/exchange/4.png") no-repeat left center;
            background-size:15px 15px;
            float:right;
            line-height: 34px;
            color:#ffc51e;
            font-size: 18px;
            margin-right: 12px;
        }
        .title1 {
            font-size: 15px;
            color: #333;
            height: 35px;
            line-height: 35px;
            padding-left: 12px;
            /*background: url(/work/adjust/img/2.png) no-repeat 5px center;*/
            background-size: 5px 15px;
            /*background-color: #f2f2f2;*/
            border-top:1px solid #f5f5f5;
        }
        .mui-content{
            padding-bottom: 10px;
        }
        .main{
            padding-top:10px;
            padding-bottom:15px;
            padding-left:12px;
            padding-right:12px;
        }
        .main>p{
            color:#666;
            font-size: 14px;
        }
        .titleBar{
            height:40px;
            background-color:#f5f5f5;
        }
        .titleBar>a{
            padding-left:25px;
            margin:0 auto;
            background: url("") no-repeat left center;
            background-size:15px 15px;
            font-size: 15px;
            line-height: 15px;
            margin-top:12.5px;
            display:block;
            width:90px;
        }
        .titleBar>a.red{
            color:#fc4f41;
            background-image:url('../../images/exchange/15.png');
        }
        .other{
            height:34px;
            margin:0 auto;
            width:115px;
        }
        .other>span{
            float:left;
            width:15px;
            height:34px;
            background:url("../../images/exchange/19.png") no-repeat center left;
            background-size:15px 15px;
        }
        .other>p{
            float:left;
            line-height: 34px;
            margin-left:10px;
            margin-right:10px;
        }

        .fixed_btn{
            position: fixed;
            height:15.3vw;
            bottom: 0;
            left:0;
            width:100%;
            padding-left: 3.12vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            box-shadow: 0 -2px 3px rgba(0,0,0,.1);
        }
        .fixed_btn>div{
            -ms-word-wrap:normal;
            word-wrap:normal;
        }

        .mui-numbox{
            border:0;
            background: #ffffff;
            padding:0 7.8vw;
            width:26vw;
        }
        .mui-numbox>.mui-btn{
            height:7.18vw;
            width:7.18vw;
            border:1px solid #f3f3f3;
            border-radius: 5px;
            top:50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        .mui-numbox>.mui-numbox-input{
            border:0!important;
        }
        .fixed_btn>div:first-child{
            font-size: 1.6rem;
        }
        .fixed_btn .go_buy{
            width:100px;
            height:100%;
            border:0;
            border-radius: 0;
            color: #ffffff;
            font-size: 1.6rem;
            background: url("../../images/exchange/btnbg.png") no-repeat;
            background-size: cover;
        }
        .fixed_btn .sum{
            color: #fe8c07;
            font-size: 1.3rem;
        }


        .self_msg>.msg_box{
            padding:4.8vw 3.75vw;
            width:82vw;
            height:128vw;
            position: absolute;
            top:50%;
            left:50%;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            border-radius: 10px;
            background: #ffffff;
        }
        .msg_box>.msg_banner>img{
            width: 50%;
        }
        .msg_box>.msg_title>img{
            width:60%;
        }
        .msg_box>.msg_title,.msg_box>.msg_banner{
            text-align: center;
            margin-bottom: 4.8vw;
        }
        .msg_box>input{
            height:30px;
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            border-radius:5px;
            border:1px solid #e5e5e5;
            margin:2.66vw 0;
            padding:5px 10px;
        }
        .msg_box>.self_remark{
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            border-radius:5px;
            border:1px solid #e5e5e5;
            margin:2.66vw 0;
            padding:5px 10px;
            height:20vw;

        }
        .msg_box>span{
            font-size: 1.4rem;
        }
        .msg_box>span>b{
            color: #f00;
        }
        .msg_box>.msg_up{
            width:100%;
            background: #FFA81D;
            border:0;
            margin-top:2.66vw;
            color: #ffffff;
        }
        .self_msg .close_btn{
            height: 8vw;
            width:8vw;
            background: url('../../images/exchange/closebtn.png') no-repeat;
            background-size: cover;
            text-align: center;
            position: absolute;
            top:0;
            right:0;
            -webkit-transform: translate(35%,-35%);
            -moz-transform: translate(35%,-35%);
            -ms-transform: translate(35%,-35%);
            -o-transform: translate(35%,-35%);
            transform: translate(35%,-35%);
        }
        .mui-backdrop{
            background: rgba(0, 0, 0, .6);
        }
        .fixed_btn .not_enough{
            background:#D8D8D8;
            color:#858585;
        }
        @media screen and (max-width: 374px) {
		    .msg_box>.msg_up{
		    	margin-top: 0;
		    }
		}
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav header">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">商品详情</h1>
</header>
<div class="mui-content">
<!--<img src="{$product.front_cover|get_cover='path'}"  class="top" alt="">-->
<!--<div class="top1 clearfix">-->
    <!--<p>{$product.title}</p>-->
    <!--<span>剩余 {$product.left}</span>-->
    <!--<a>{$product.price}</a>-->
<!--</div>-->
<!--<div class="title1">宝贝详情</div>-->
<!--<div class="main">-->
    <!--{$product.content}-->
<!--</div>-->
    <!--<div class="fixed_btn">-->
        <!--<div class="lf">-->
            <!--<span class="add">+</span><input type="text" class="product_num" value="0"><span class="minus">-</span>-->
        <!--</div>-->
        <!--<div class="rf">-->
            <!--<button class="go_buy">兑换</button>-->
        <!--</div>-->
    <!--</div>-->
    <div class="self_msg mui-backdrop" style="display:none ">
        <div class="msg_box">
            <div style="" class="close_btn"></div>
            <div class="msg_title"><img src="../../images/exchange/mtitle.png" style="" alt=""></div>
            <div class="msg_banner"><img src="../../images/exchange/mbanner.png" style="" alt=""></div>
            <span><b>*&nbsp;</b>姓名：</span>
        <input type="text" class="self_name" placeholder="请输入姓名">
            <span><b>*&nbsp;</b>电话：</span>
        <input type="text" class="self_tel" placeholder="请输入电话">
            <span><b>*&nbsp;</b>备注：</span>
        <textarea type="text" class="self_remark" placeholder="请输入备注"></textarea>
            <button class="msg_up">提交</button>
        </div>
    </div>
    <div class="fixed_btn">
        <div>数量</div>
        <div class="mui-numbox"  data-numbox-min="0" data-numbox-max="">
            <!-- "-"按钮，点击可减小当前数值 -->
            <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
            <input class="mui-numbox-input num" style="display: block;font-size: 15px" type="number"/>
            <!-- "+"按钮，点击可增大当前数值 -->
            <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
        </div>
        <div class="sum">
            <span>合计：</span><span class="score">0</span><span>积分</span>
        </div>
        <button class=" go_buy">立即兑换</button>
    </div>
</div>
<script src='../../plugins/jquery/jquery-3.1.0.min.js'></script>
<script src="../../plugins/mui/mui.min.js"></script>
<script src="../../js/getApiToken.js"></script>
<script type="text/javascript" src="../../js/md5.js" ></script>
<script>

    mui.init();
    mui.plusReady(function(){
        var isClick=false,
                myScore,
                canExchange=true,
                left,
                wait = plus.nativeUI.showWaiting('正在加载中...'),
                product_id=plus.webview.currentWebview().detail_id,//列表id
                user_id = plus.storage.getItem('cg_user_id'),//用户id
                user_token = plus.storage.getItem('cg_user_token');//用户token
        myAjax('exchange/productdetail/getproductinfobyid','post',{user_id:user_id,user_token:user_token,product_id:product_id},function(data){
            if(data.success){
                myScore=data.data[0].score;
                left=data.data[0].left;
                //设置input最大值
                $('.fixed_btn .mui-numbox').attr('data-numbox-max',left);
                var html='<img src="'+_baseUrl+data.data[0].imgpath+'"  class="top" alt="">'+
                    '<div class="top1 clearfix">'+
                        '<p>'+data.data[0].title+'</p>'+
                        '<span>剩余 '+data.data[0].left+'</span>'+
                        '<a>'+data.data[0].price+'</a>'+
                    '</div>'+
                    '<div class="title1">宝贝详情</div>'+
                    '<div class="main">'+
                        data.data[0].content+
                    '</div>';
                $('.mui-content').append(html);
//                数量改变监听
                changeLis(data.data[0].price);
                    wait.close();
            }else{
                wait.close();
                mui.alert("网络错误，请重新尝试");
            }

        });
        //兑换
        $('.go_buy').on('click',function(){
            if(left){
                var num=$(".fixed_btn .num").val();
                if(!(num==0)){
                    if(canExchange){
                        var mask = $(".self_msg");
                        mask.show();
                        $('.self_msg .close_btn').on("click",function(){
                            mask.hide();
                        });
                        $(".self_msg .msg_up").on("click",function(){
                            if (!isClick){
                                var sName=$(".self_name").val();
                                var sTel=$(".self_tel").val();
                                var sRemark=$('.self_remark').val();
                                if(sName && sTel && sRemark){
                                    isClick=true;
                                    var wait = plus.nativeUI.showWaiting('正在加载中...');
                                        myAjax('exchange/exchange/exchange','post',{user_id:user_id,user_token:user_token,product_id:product_id,num:num,name:sName,phone:sTel,remark:sRemark},function (data) {
                                            console.log(JSON.stringify(data));
                                            if(data.success){
                                                wait.close();
                                                mui.alert("兑换成功，请等待后台校验！");
                                                mask.hide();
                                                location.reload(true)
                                            }else{
                                                wait.close();
                                                mui.alert(data.error_msg);
                                            }
                                        });
                                    }else{
                                    mui.alert('请填写姓名、电话和备注！');
                                }
                            }
                        })
                    }else{
                        mui.alert("您的积分不足！");
                    }
                }else{
                    mui.alert("请输入兑换数量！");
                }
            }else{
                alert("商品已兑光！")
            }
        });
//        数量改变监听
        function changeLis(score) {
            $(".num").on("change",function () {
                var $the=$(this),$btn=$('.go_buy');
                $('.sum>.score').html($the.val()*score);
                if($(this).val()*score>myScore){
                    $btn.html("积分不足");
                    $btn.addClass('not_enough');
                    canExchange=false;
                }else{
                    $btn.html("立即兑换");
                    if($btn.hasClass('not_enough')){
                        $btn.removeClass('not_enough')
                    }
                    canExchange=true;
                }
            })
        }
    })
</script>
</body>
</html>